<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item
        label="证书类型"
        prop="paperType"
        @keyup.enter.native="handleQuery"
      >
        <el-select v-model="queryParams.paperType" placeholder="请选择是否有效">
          <el-option
            v-for="item in paperTypeList"
            :key="item.id"
            :label="item.paperName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:papers:add']"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:papers:edit']"
          >修改</el-button
        >
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:papers:remove']"
          >删除</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:papers:export']">导出</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-check"
          size="mini"
          @click="handlePaperType"
          v-hasPermi="['system:papers:add']"
          >新增证书类型</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- <el-table v-loading="loading" :data="papersList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="证书名" align="center" prop="paperName" />
      <el-table-column label="证件编号" align="center" prop="paperNo" />
      <el-table-column label="颁证机构" align="center" prop="givePaperDep" />
      <el-table-column label="颁证时间" align="center" prop="giveTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.giveTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生效时间" align="center" prop="validTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.validTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="失效时间" align="center" prop="unValidTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.unValidTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件类型" align="center" prop="paperType">
        <template slot-scope="scope">
          <p v-if="scope.row.paperType">{{ scope.row.paperType | filterPaperType(that) }}</p>
        </template>
      </el-table-column>
      <el-table-column label="证件描述" align="center" prop="paperDescription" />
      <el-table-column label="证书照片" align="center" prop="fileUrl">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.fileUrl" :preview-src-list="[scope.row.fileUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="是否有效" align="center" prop="isValid">
        <template slot-scope="scope">

          <p v-if="scope.row.isValid == 1">有效</p>
          <p v-if="scope.row.isValid == 2">无效</p>

        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['system:papers:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system:papers:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table> -->
    <div class="content">
      <el-card v-for="item in papersList" :key="item.id" class="cardItem">
        <p class="title">{{ item.paperType | filterPaperType(that) }}</p>
        <div class="mainImg">
          <el-image
            style="width: 100px; height: 100px"
            :src="item.fileUrl"
            :preview-src-list="srcList"
          >
          </el-image>
          <div class="text">
            <p>类型:{{ item.paperType | filterPaperType(that) }}</p>
            <p>证件编号:{{ item.paperName }}</p>
            <p>生效时间:{{ item.validTime }}</p>
            <p>失效时间:{{ item.unValidTime }}</p>
          </div>
        </div>
        <div class="btn">
          <el-button class="btItem" type="primary" @click="handleUpdate(item)"
            >修改</el-button
          >
          <el-button
            class="btItem"
            type="info"
            plain
            @click="handleDelete(item)"
            >删除</el-button
          >
        </div>
        <span class="type" :class="item.isValid == '1' ? 'yes' : 'no'"
          ><span>{{ item.isValid == "1" ? "有效" : "无效" }}</span></span
        >
      </el-card>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :page-sizes="[6]"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改企业证件对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="证书类型" prop="paperType">
          <el-select v-model="form.paperType" placeholder="请选择证书类型">
            <el-option
              v-for="item in paperTypeList"
              :key="item.id"
              :label="item.paperName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书名" prop="paperName">
          <el-input v-model="form.paperName" placeholder="请输入证书名" />
        </el-form-item>
        <el-form-item label="证件编号" prop="paperNo">
          <el-input v-model="form.paperNo" placeholder="请输入证件编号" />
        </el-form-item>
        <el-form-item label="颁证机构" prop="givePaperDep">
          <el-input v-model="form.givePaperDep" placeholder="请输入颁证机构" />
        </el-form-item>
        <el-form-item label="颁证日期" prop="giveTime">
          <el-date-picker
            clearable
            v-model="form.giveTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择颁证时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="生效日期" prop="validTime">
          <el-date-picker
            clearable
            v-model="form.validTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择生效时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期" prop="unValidTime">
          <el-date-picker
            clearable
            v-model="form.unValidTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择失效时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="证件描述" prop="paperDescription">
          <el-input
            v-model="form.paperDescription"
            placeholder="请输入证件描述"
          />
        </el-form-item>
        <el-form-item label="证书照片" prop="fileUrl"> 
          <ImageUpload v-model="form.fileUrl" @input="upImage" :limit="1"></ImageUpload>
        </el-form-item>

        <el-form-item label="是否有效" prop="isValid">
          <el-select v-model="form.isValid" placeholder="请选择是否有效">
            <el-option label="有效" :value=1> </el-option>
            <el-option label="无效" :value=2> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="title"
      :visible.sync="openType"
      width="500px"
      append-to-body
    >
      <el-input v-model="paperName" placeholder="请输入证书类型" />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitType">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  listPapers,
  getPapers,
  delPapers,
  addPapers,
  updatePapers,
  allpaperName,
  addpaperName,
} from "@/api/system/license";
import cache from '@/plugins/cache';
export default {
  name: "Papers",
  data() {
    return {
      srcList:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 企业证件表格数据
      papersList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 1有效 2无效时间范围
      daterangeCreateTime: [],
      // 查询参数,
      openType: false,
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        paperName: null,
        paperNo: null,
        givePaperDep: null,
        giveTime: null,
        validTime: null,
        unValidTime: null,
        paperType: null,
        paperDescription: null,
        mineId: null,
        fileName: null,
        fileUrl: null,
        createTime: null,
        createUserId: null,
        updateUserId: null,
        isValid: null,
      },
      paperName: null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        paperType: [
          { required: true, message: "请选择证书类型", trigger: "change" },
        ],
        paperName: [
          { required: true, message: "请输入证书名", trigger: "blur" },
        ],
        paperNo: [
          { required: true, message: "请输入证件编号", trigger: "blur" },
        ],
        givePaperDep: [
          { required: true, message: "请输入颁证机构", trigger: "blur" },
        ],
        giveTime: [
          {
            type: "string",
            required: true,
            message: "请选择颁证日期",
            trigger: "change",
          },
        ],
        validTime: [
          {
            type: "string",
            required: true,
            message: "请选择生效日期",
            trigger: "change",
          },
        ],
        unValidTime: [
          {
            type: "string",
            required: true,
            message: "请选择失效日期",
            trigger: "change",
          },
        ],
        fileUrl: [
          { required: true, message: "请选择证书类型", trigger: "change" },
        ],
        isValid: [
          { required: true, message: "请选择是否有效", trigger: "change" },
        ],
      },
      paperTypeList: [],
      that: this,
    };
  },
  created() {
    let userId = cache.session.getJSON('userId');
    this.form.createUserId = userId
    this.getList();
    this.allpaperNames();
  },
  filters: {
    filterPaperType(value, that) {
      let obj = [];
      that.paperTypeList.find((v) => {
        if (v.id == value) {
          obj.push(v);
        }
      });

      if (obj.length != 0) {
        return obj[0].paperName ? obj[0].paperName : "";
      }

      //  return 0;
    },
  },
  methods: {
    upImage(e) {
      this.form.fileUrl = e;
    },
    handlePaperType() {
      this.openType = true;
      this.paperName = ""
    },
    allpaperNames() {
      allpaperName({ pageNum: 1,
        pageSize: 999,}).then((res) => {
        this.paperTypeList = res.rows;
        console.log(this.paperTypeList);
      });
    },
    /** 查询企业证件列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeCreateTime && "" != this.daterangeCreateTime) {
        this.queryParams.params["beginCreateTime"] =
          this.daterangeCreateTime[0];
        this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
      }
      listPapers(this.queryParams).then((response) => {
        this.papersList = response.rows;

        // 图片大屏预览
        this.srcList = response.rows.map((item)=>{
          return item.fileUrl
        })

        console.log(this.papersList);
        this.total = response.total;
        this.loading = false;


        
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.openType = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        paperName: null,
        paperNo: null,
        givePaperDep: null,
        giveTime: null,
        validTime: null,
        unValidTime: null,
        paperType: null,
        paperDescription: null,
        mineId: null,
        fileName: null,
        fileUrl: null,
        createTime: null,
        createUserId: cache.session.getJSON('userId'),
        updateTime: null,
        updateUserId: null,
        isValid: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加企业证件";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getPapers(id).then((response) => {
        this.form = { ...response.data, updateUserId: cache.session.getJSON('userId') };
        this.open = true;
        this.title = "修改企业证件";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updatePapers(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPapers(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    submitType() {
      if(!this.paperName){
        this.openType = false;
      }else{
        addpaperName({ paperName: this.paperName }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$modal.msgSuccess("新增成功");
          this.openType = false;
          this.getList();
        } else {
          this.$modal.msgError("新增失败");
          this.openType = false;
          this.getList();
        }
      });
      }
     
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除企业证件编号为"' + ids + '"的数据项？')
        .then(function () {
          return delPapers(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/papers/export",
        {
          ...this.queryParams,
        },
        `papers_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 32%);
  grid-gap: 32px;

  .cardItem {
    box-sizing: border-box;
    position: relative;
    height: 283px;
    .type {
      position: absolute;
      top: 25px;
      left: 0;
      width: 70px;
      height: 35px;
      background-color: #0dc4b5;
      border-radius: 0 20px 20px 0;
      text-align: center;
      span {
        line-height: 35px;
        color: #fff;
      }
    }
    .yes {
      background-color: #0dc4b5;
    }
    .no {
      background-color: #c4cad5;
    }
    .title {
      margin-left: 60px;
    }
    .mainImg {
      // width: 122px;
      display: flex;
      align-items: center;
      img {
        display: block;
        width: 122px;
        height: 120px;
      }
      .text {
        margin-left: 20px;
        p {
          line-height: 16px;
          color: #687487;
        }
      }
    }
    .btn {
      float: right;
      .btItem {
        width: 80px;
        height: 35px;
      }
    }
  }
}
</style>